
<template>



  <div class="card" style="margin-bottom: 10px">
    <el-table :data="data.tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="170" />
      <el-table-column prop="score" label="成绩" width="170" />
      <el-table-column prop="name" label="课程" width="170" />
      <el-table-column prop="stuName" label="学生" width="170" />
      <el-table-column prop="comment" label="老师评语" width="170" />
      <el-table-column prop="feedback" label="学生反馈" width="170" />
      <el-table-column label="操作" width="170">
<!--        #默认值=“范围”scope表单.row行信息-->
        <template #default="scope">
          <el-button type="warning" v-if="data.user.data[0].role==='Student'" @click="setFeedback(scope.row)" >反馈</el-button>
        </template>
      </el-table-column>
      <!--      <el-table-column必须加width不然会报错-->

    </el-table>
  </div>
  <div class="card" style="margin-bottom: 10px">
    <!--绑定分页插件,点击分页事件-->
    <el-pagination v-model:current-page="data.pageNum" v-model:page-size="data.pageSize" @current-change="handelCurrentChange"
                   background layout="prev, pager, next" :total="data.total" />
  </div>
  <el-dialog width="35%" v-model="data.formVisible" title="反馈信息">
    <el-form :model="data.form" label-width="100px" label-position="right" style="padding-right: 40px">
      <el-form-item label="学生反馈" >
        <el-input v-model="data.form.feedback"  :rows="2" type="textarea" placeholder="Please input" autocomplete="off"/>
      </el-form-item>


    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="data.formVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">
          保 存
        </el-button>
      </span>
    </template>
  </el-dialog>


</template>

<script  setup>


import {reactive} from "vue";
import {  Search } from '@element-plus/icons-vue'
import request from "@/utils/request.js";
import {ElMessage, ElMessageBox} from "element-plus";
import router from "@/router";

const data =reactive({
  name:'',
  descr:'',
  teacher:'',
  id:'',
  tableData:[],
  total: 0,
  pageSize: 10,
  pageNum: 1,
  user: JSON.parse(localStorage.getItem('student-user')||'{}'),
  form:{},
  formVisible:false

})

const load = () =>{
  request.get('/grade/selectPage',{
    params:{
      pageNum: data.pageNum,
      pageSize:data.pageSize,
      name:data.name,
      descr:data.descr,
      student_id:data.user.data[0].id,
      form:{}

    }
  }).then(res=>{
    console.log(res.data.data.total)
    data.tableData=res.data.data?.list ||[]
    data.total=res.data.data.total || 0

  })


}


load()
const handelCurrentChange =(pageNum)=>{
  //当翻页当时候从新加载数据
  load()

}





const setFeedback=(row)=>{
  data.form = JSON.parse(JSON.stringify(row))//拷贝数据dao1表单对象
  data.formVisible=true
  //打开弹窗


}

//自定义data
const update = ()=>{
  request.put("/grade/update",data.form).then(res=>{
    if (res.data.code===1){
      data.formVisible=false
      load()
      ElMessage.success("操作成功")

    }else{
      ElMessage.error("操作失败")
    }

  })

}







</script>






<style scoped>

</style>

